import React, { Component } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { View, Text } from 'react-native'
import { Toast, Button, DatePickerView } from 'antd-mobile'
import * as Libs from '../utils/Libs'

export default class extends Component {
  static propTypes = {
    visible: PropTypes.bool,
    hideFunc: PropTypes.func,
    mode: PropTypes.string,
    onSubmit: PropTypes.func,
    valueOne: PropTypes.any,
    valueTwo: PropTypes.any
  }
  constructor(props) {
    super(props)
    this.state = {
      chooseTime: new Date(),
      curTime: null,
      startTime: null,
      endTime: null,
      visible: false,
    }
  }

  render() {
    const { mode } = this.props
    if(this.props.visible === false) {
      return (<View />);
    }
    if(mode === 'custom') {
      return this.renderCustom()
    } else if(mode === "year") {
      return this.renderYear()
    } else if(mode === "month") {
      return this.renderMonth()
    }
  }

  onStartTimeChange = (v) => {
    this.setState({
      startTime:  v
    })
  }

  onEndTimeChange = (v) => {
    this.setState({
      endTime: v
    })
  }

  invokeSubmit = () => {
    const startTime = this.state.startTime || this.props.valueOne
    const endTime = this.state.endTime || this.props.valueTwo
    if(startTime.getTime() > endTime.getTime()) {
      Toast.fail('开始时间不能大于结束时间', 1)
      return ;
    }
    if(startTime.getTime() < moment(endTime.getTime()).subtract(11, 'month').toDate().getTime()) {
      Toast.fail("时间区间不能大于一年", 1)
      return ;
    }
    this.props.hideFunc && this.props.hideFunc()
    this.props.onSubmit &&
      this.props.onSubmit(startTime, endTime)
  }

  changeTime = (v) => {
    this.setState({
      chooseTime: v
    })
  }

  invokeSubmitYM = ( v) => {
    this.props.hideFunc && this.props.hideFunc()
    this.props.onSubmit &&
    this.props.onSubmit(this.state.chooseTime)
  }

  renderYear = () => {
    return (
      <View>
        <DatePickerView value={this.state.chooseTime} onChange={this.changeTime} mode="year"/>
        <View style={{marginTop: 20}}>
          <Button onClick={this.invokeSubmitYM}>确定</Button>
        </View>
      </View>
    )
  }

  renderMonth = () => {
    return (
      <View>
        <DatePickerView value={this.state.chooseTime} onChange={this.changeTime} mode="month"/>
        <View style={{marginTop: 20}}>
          <Button onClick={this.invokeSubmitYM}>确定</Button>
        </View>
      </View>
    )
  }

  renderCustom = () => {
    const startTime = this.state.startTime || this.props.valueOne
    const endTime = this.state.endTime || this.props.valueTwo
    return (
      <View>
        <View style={{flexDirection: 'row'}}>
          <View style={{flex: 1}}><DatePickerView value={startTime} onChange={this.onStartTimeChange} mode="month" /></View>
          <View style={{flex: 1}}><DatePickerView value={endTime} onChange={this.onEndTimeChange} mode="month" /></View>
        </View>
        <View style={{marginTop: 20}}>
          <Button onClick={this.invokeSubmit}>确定</Button>
        </View>
      </View>
    )
  }
}
